import { useEffect, useState } from 'react';
import { usePrevious } from 'ahooks';
import _ from 'lodash';
const fn = async (_id) => {
  await new Promise((res) => setTimeout(res, 5000));
  return { param: _id };
};

function useTest(id) {
  const [data, setData] = useState(() => ({}));
  useEffect(() => {
    setData({ id });
  }, [id]);
  console.log(
    '自定义hook就相当于普通function吗？',
    '是的，相当于普通的嵌套，所以每次渲染（无论什么原因）这个log都会打印'
  );
  return data;
}
export default function TestChore() {
  const [id, setId] = useState(0);
  const idPre = usePrevious(id);
  const [data, setData] = useState({});
  const _d = useTest(id);

  // #region  Effect是创建了一个闭包effect，依赖改变前的effect还是有效了，里面的state也都是以前的
  // useEffect(() => {
  //   fn(id).then((res) => {
  //     if (id !== res.param) {
  //       console.log('结果被舍弃');
  //     } else {
  //       console.log(`得到${res.param}的结果！`);
  //     }
  //   });
  // }, [id]);

  // setTimeout(() => {
  //   setId(3);
  // }, 1000);

  // #endregion

  const click1 = () => {
    // data[id] = 'test' + id;
    // setId(id + 1);
    setData({ id: 1 });
    setId((pre) => pre + 1);
  };

  return (
    <>
      <div onClick={click1}>Look Console! {JSON.stringify(data)}</div>
      <div>
        {idPre === undefined ? 'undefined' : JSON.stringify(idPre)}--{JSON.stringify(id)}
      </div>
    </>
  );
}
const reg1 = new RegExp('^' + _.escapeRegExp('{{a}}') + '$');
const reg2 = /^{{a}}$/;
console.log(reg1.source, reg2.source);
console.log(reg1.test('{{a}}'), reg2.test('{{a}}'));
